import React from 'react';
import { Container, Row, Col, Card } from 'react-bootstrap';
import DashboardLayout from '../components/DashboardLayout'; // ✅ 添加系统布局
import '../css/Diseases.css';

// 导入图片
import ageRelatedMacularDegenerationImage from '../assets/age_related_macular_degeneration.jpg';
import cataractImage from '../assets/cataract.jpg';
import diabetesImage from '../assets/diabetes.jpg';
import glaucomaImage from '../assets/glaucoma.jpg';
import hypertensionImage from '../assets/hypertension.jpg';
import normalImage from '../assets/normal.jpg';
import othersImage from '../assets/others.jpg';
import pathologicalMyopiaImage from '../assets/pathological_myopia.jpg';

const diseasesData = [
  {
    name: '年龄相关性黄斑变性',
    description: '年龄相关性黄斑变性（YBMD）是由于视网膜中央黄斑受损而引起的，会导致中央视力丧失。',
    symptoms: '视力丧失、视线模糊、视野出现黑暗或空白区域。',
    riskFactors: '年龄、遗传倾向、吸烟、高血压、肥胖。',
    image: ageRelatedMacularDegenerationImage
  },
  {
    name: '白内障',
    description: '由于晶状体混浊而导致的，最终引起视力下降。',
    symptoms: '视线模糊、夜间视力困难、颜色显得暗淡。',
    riskFactors: '衰老、糖尿病、长时间暴露于紫外线、吸烟。',
    image: cataractImage
  },
  {
    name: '糖尿病',
    description: '糖尿病可能会损伤眼部微小血管，引发糖尿病性视网膜病变。',
    symptoms: '视线模糊、突然视力下降、眼内出血。',
    riskFactors: '血糖控制不佳、长期糖尿病。',
    image: diabetesImage
  },
  {
    name: '青光眼',
    description: '青光眼是一种由于眼内压升高而损伤视神经的疾病。',
    symptoms: '视野缺损、逐渐视力下降、无痛性视力丧失。',
    riskFactors: '年龄、家族青光眼史、高眼内压、近视。',
    image: glaucomaImage
  },
  {
    name: '高血压',
    description: '高血压可能会损伤眼部血管，引起高血压性视网膜病变。',
    symptoms: '视力障碍、视力下降、眼内出血。',
    riskFactors: '控制不良的高血压、长期高血压。',
    image: hypertensionImage
  },
  {
    name: '病理性近视',
    description: '由于高度近视导致视网膜及其他眼部结构受损。',
    symptoms: '视力下降、视网膜脱离风险、黄斑变化。',
    riskFactors: '遗传倾向、高度近视。',
    image: pathologicalMyopiaImage
  },
  {
    name: '其他',
    description: '除上述疾病外的其他眼底病变。',
    symptoms: '症状因病种而异。',
    riskFactors: '具体原因不同而各异。',
    image: othersImage
  },
  {
    name: '正常',
    description: '在眼底检查中未发现任何病理异常，眼部结构健康。',
    symptoms: '视力正常，视网膜和视神经无异常。',
    riskFactors: '无。',
    image: normalImage
  },
];

const Diseases = () => {
  return (
    <DashboardLayout>
      <Container className="diseases-container my-5">
        <h2 className="text-center mb-4">疾病介绍</h2>
        <Row className="justify-content-center">
          {diseasesData.map((disease, index) => (
            <Col md={3} sm={6} xs={12} className="mb-4" key={index}>
              <Card className="h-100 shadow-card">
                <Card.Body className="text-center">
                  <div className="disease-image-container">
                    <img src={disease.image} alt={disease.name} className="disease-image" />
                  </div>
                  <Card.Title>{disease.name}</Card.Title>
                  <Card.Text>{disease.description}</Card.Text>
                  <Card.Text><strong>症状：</strong> {disease.symptoms}</Card.Text>
                  <Card.Text><strong>风险因素：</strong> {disease.riskFactors}</Card.Text>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      </Container>
    </DashboardLayout>
  );
};

export default Diseases;
